<html>

<head>

    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <a href="https://weread.qq.com/web/reader/98e322505d008698ee8ebbekc7432af0210c74d97b01b1c">read</a>
        <div>{{joke}}</div>

        <div v-pre>{{joke}}</div>
        <div v-cloak>{{joke}}</div>
        <img v-bind:src="imgsrc">

        <h2 :class="clazz()">hello</h2>
        <button @click="changeColor">变色</button></button>
        <h2 :style="{fontSize:fontSize+'px',backgroundColor:finalColor}">动态绑定style</h2></h2>
        <h2 :style="getStyle()">动态绑定style</h2></h2>
        <h3>{{getFullName()}}</h3>
        <h3>{{fullname}}</h3>
        <h3>总价格：{{totalPrice}}</h3>
        <div>{{count}}</div>
        <button @click="add">+</button></button>
        <button @click="sub">-</button></button>

        <button @click="btnClick">按钮1</button>
        <button @click="btnClick1">按钮2</button>
        <button @click="btnClick2(123,$event)">按钮3</button>
        <!-- 在调用方法时，如果需要传入浏览器事件对象则用$event -->

        <!-- 在点击button的时候不希望div的点击事件触发，则用修饰 @click.stop -->
        <div @click="divClick">
        <button @click.stop="btnClick3">只希望触发button的点击事件</button>
        </div>

        <h2>count={{count}}</h2>
        <h2 v-if="count>=90">优秀</h2>
        <h2 v-else-if="count>=80">良好</h2>
        <h2 v-else-if="count>=60">及格</h2>
        <h2 v-else>不及格</h2>
        

        <h2>分数结果：{{result}}</h2>

        <button @click="count+=10">加分</button>
        <button @click="count-=10">减分</button>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话",
                imgsrc: "https://img11.360buyimg.com/mobilecms/s300x300_jfs/t1/45569/3/4632/106102/5d24cc4bE92728e12/8121f0d28270c55e.jpg!q70.jpg.webp",
                isActive: true,
                fontSize:100,
                finalColor:'red',
                firstName:'马',
                lastName:'云',
                books:[
                    {id:110,name:'代码重构',price:129},
                    {id:112,name:'代码重构',price:129},
                    {id:113,name:'代码重构',price:129},
                    {id:114,name:'代码重构',price:129},
                    {id:115,name:'代码重构',price:129},
                ],
                count:60
            },
            //计算属性
            computed:{
                //计算属性的简写
                fullname:function(){
                    return this.firstName+' '+this.lastName;
                },
                //计算属性的完整写法
                fullName:{
                    //一般只写get方法，不写set方法，叫只读属性
                    set:function(){

                    },
                    get:function(){
                        return this.firstName+' '+this.lastName
                    }
                },
                //总价格
                totalPrice:function(){
                    let result=0;
                    for(book of this.books){
                        result+=book.price;
                    }
                    return result;
                },
                result(){
                    if(this.count>=90){
                        return "优秀";
                    }else if(this.count>=80){
                        return "良好"
                    }else if(this.count>=60){
                        return "及格";
                    }else{
                        return "不及格";
                    }
                }
            },
            methods: {
                doIt: function (p1, p2) {
                    console.info('做IT')
                    console.info(p1 + p2)
                },
                sayHi: function () {
                    alert(this.value)
                },
                getJoke: function () {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        that.joke = response.data;
                    }, function (err) {
                        console.log(err);
                    })
                },
                changeColor: function () {
                    this.isActive = !this.isActive;
                },
                clazz: function () {
                    return { active: this.isActive, line: this.isActive };
                },
                getStyle:function(){
                    return { fontSize: this.fontSize + 'px', backgroundColor: this.finalColor }
                },
                getFullName:function(){
                    return this.firstName+' '+this.lastName;
                },
                //函数的增强写法
                add(){
                    this.count++
                },
                sub(){
                    this.count--
                },
                btnClick(){
                    console.log('按钮点击')
                },
                //在事件定义时，写方法时省略了小括号，但是方法本身时需要一个参数的时候，Vue会将浏览器产生的Event事件作为参数传入到方法中
                btnClick1(v1){
                    console.log(v1)
                },
                btnClick2(v1,event){
                    console.log(v1,event)
                },
                btnClick3(){
                    console.log('点击button')
                },
                divClick(){
                    console.log('点击div')
                }
            
            }
        })
    </script>
</body>

</html>